<button nz-button nzType="primary" (click)="showNewModal(null)">新增</button>
<button nz-button nzType="primary" nzDanger (click)="delOrganization()" [disabled]="checklistSelection.selected.length===0">
  删除
</button>
<button nz-button nzType="primary" (click)="showPermissionModal(null)" [disabled]="checklistSelection.selected.length===0">
  批量授权
</button>
<!-- <button nz-button nzType="primary" (click)="showSetPermissionModal()">
  模型权限
</button> -->

<nz-divider nzOrientation="left" nzText=""></nz-divider>
<div nz-row>
  <div nz-col [nzSpan]="18" [nzPush]="6">
    <nz-card nzTitle="基本信息" nzSize="small" [nzExtra]="extraTemplate">
      <div nz-row>
        <div nz-col nzSpan="8">
          名称：
          {{
            selectListSelection.selected![0] === undefined
              ? undefined
              : selectListSelection.selected![0].me.name
          }}
          <i
            nz-icon
            [nzType]="selectListSelection.selected![0] === undefined
            ? ''
            :selectListSelection.selected[0]!.me.icon!"
            nzTheme="outline"
          ></i>
        </div>
        <div nz-col nzSpan="8">
          代码：{{
            selectListSelection.selected![0] === undefined
              ? undefined
              : selectListSelection.selected![0].me.code
          }}
        </div>
        <div nz-col nzSpan="8">
          授权角色：
          <nz-tag nzColor="blue" *ngFor="let sysroleMenu of sysroleMenus" nzMode="closeable" (nzOnClose)="onSysroleRemove(sysroleMenu.id,$event)">
            {{ sysroleMenu.name }}
          </nz-tag>
        </div>
        <div nz-col nzSpan="8">
          URL：{{
            selectListSelection.selected![0] === undefined
              ? undefined
              : selectListSelection.selected![0].me.url
          }}
        </div>

      </div>
      <div nz-row>
        <div nz-col nzSpan="12">
          创建时间：{{
            selectListSelection.selected![0] === undefined
              ? undefined
              : selectListSelection.selected![0].me.createdDate
          }}
        </div>
        <div nz-col nzSpan="12">
          创建者：{{
            selectListSelection.selected![0] === undefined
              ? undefined
              : selectListSelection.selected![0].me.createdBy
          }}
        </div>
      </div>
        <div nz-row>
        <div nz-col nzSpan="12">
          最后更新时间：{{
            selectListSelection.selected![0] === undefined
              ? undefined
              : selectListSelection.selected![0].me.modifiedDate
          }}
        </div>
        <div nz-col nzSpan="12">
          最后更新者：{{
            selectListSelection.selected![0] === undefined
              ? undefined
              : selectListSelection.selected![0].me.modifiedBy
          }}
        </div>
      </div>
    </nz-card>
    <ng-template #extraTemplate>
      <ng-container *ngIf="this.selectListSelection.selected.length > 0">
        <!-- <a
          nz-tooltip
          nzTooltipTitle="数据授权"
          (click)="showSetDataPermissionModal()"
          ><i nz-icon nzType="safety-certificate" nzTheme="outline"></i
        ></a> -->
        <a
          nz-tooltip
          nzTooltipTitle="编辑"
          (click)="showNewModal(this.selectListSelection.selected[0].me)"
          ><i nz-icon nzType="edit" nzTheme="outline"></i
        ></a>
        <!-- <a nz-tooltip nzTooltipTitle="查看数据权限"
          ><i nz-icon nzType="eye" nzTheme="outline"></i
        ></a> -->
      </ng-container>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="6" [nzPull]="18" class="content-scroll">
    <!-- <nz-tree [nzData]="nodes" nzDraggable nzBlockNode (nzOnDrop)="nzEvent($event)"></nz-tree> -->
    <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource">
      <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
        <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
        <nz-tree-node-checkbox
          [nzDisabled]="node.expandable"
          [nzChecked]="checklistSelection.isSelected(node)"
          (nzClick)="leafItemSelectionToggle(node)"
        ></nz-tree-node-checkbox>
        <nz-tree-node-option
          [nzSelected]="selectListSelection.isSelected(node)"
          (nzClick)="onNodeSelect(node)"
        >
          {{ "[" + node.me?.code + "]" + node.me?.name }}
        </nz-tree-node-option>
        <div
          (mouseover)="node.class = { opacity: 1 }"
          (mouseout)="node.class = { opacity: 0 }"
          [style]="node.class === undefined ? { opacity: 0 } : node.class"
        >
          <a style="color: red" (click)="moveUp(node)"
            ><i nz-icon nzType="arrow-up" nzTheme="outline"></i
          ></a>
          <a style="color: green" (click)="moveDown(node)"
            ><i nz-icon nzType="arrow-down" nzTheme="outline"></i
          ></a>
        </div>
      </nz-tree-node>

      <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
        <nz-tree-node-toggle>
          <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
        </nz-tree-node-toggle>

        <nz-tree-node-checkbox
          [nzChecked]="descendantsAllSelected(node)"
          [nzIndeterminate]="descendantsPartiallySelected(node)"
          (nzClick)="itemSelectionToggle(node)"
        ></nz-tree-node-checkbox>

        <nz-tree-node-option
          [nzDisabled]="node.disabled"
          [nzSelected]="selectListSelection.isSelected(node)"
          (nzClick)="onNodeSelect(node)"
        >
          {{ "[" + node.me?.code + "]" + node.me?.name }}
        </nz-tree-node-option>
        <nz-switch [(ngModel)]="node.includeSubMenu" nzSize="small" nz-tooltip="包含所有子菜单"></nz-switch>
        <div
          (mouseover)="node.class = { opacity: 1 }"
          (mouseout)="node.class = { opacity: 0 }"
          [style]="node.class === undefined ? { opacity: 0 } : node.class"
        >
          <a style="color: red" (click)="up(node)"
            ><i nz-icon nzType="arrow-up" nzTheme="outline"></i
          ></a>
          <a style="color: green" (click)="down(node)"
            ><i nz-icon nzType="arrow-down" nzTheme="outline"></i
          ></a>
        </div>
      </nz-tree-node>
    </nz-tree-view>
    <!-- <div style="min-height: 20px;flex-shrink: 0;"></div> -->
  </div>
</div>

<nz-modal
  [(nzVisible)]="isNewVisible"
  nzTitle="新增"
  (nzOnCancel)="handleCancel()"
  (nzOnOk) = "submitForm()"
>
  <nz-content *nzModalContent>
    <form
      nz-form
      nzLayout="vertical"
      [formGroup]="validateForm"
    >
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="请输入名称" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>

        <nz-form-label>图标</nz-form-label>
          <input nz-input formControlName="icon" placeholder="请输入图标" />
          <a><i
            nz-icon
            [nzType]="validateForm.value.icon"
            nzTheme="outline"
          ></i>
        </a>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="请输入代码" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>URL</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="url" placeholder="请输入菜单地址" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>请选择上级：</nz-form-label>
        <app-menu-search></app-menu-search>
      </nz-form-item>
    </form>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForSetPermission"
  nzTitle="设置模型权限"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="saveModelPermission()"
>
  <nz-content *nzModalContent>
    <app-set-model-permission></app-set-model-permission>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForSetDataPermission"
  nzTitle="设置数据权限"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="saveDataPermission()"
>
  <nz-content *nzModalContent>
    <app-set-data-permission></app-set-data-permission>
  </nz-content>
</nz-modal>


<nz-modal
  [(nzVisible)]="isPermissionVisible"
  nzTitle="授权"
  (nzOnCancel)="handlePermissionCancel()"
  (nzOnOk)="submitPermissionForm()"
>

  <ng-container *nzModalContent>
    <nz-tag *ngFor="let sysrole of checklistSelection.selected;let i = index" nzColor="blue">
      {{sysrole.me.name}}
    </nz-tag>
    <app-sysrole-search></app-sysrole-search>
  </ng-container>
</nz-modal>
